<!-- #layout name=blank-->
<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">Product types</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a href="javascript:;" class="btn navbar-btn green" :href="newTypeUrl"
        >Add a new type</a
      >
      <a v-if="selected.length > 0" @click="onDelete" class="btn red navbar-btn"
        >Delete</a
      >
    </div>
  </div>
  <kb-table :data="tableData" show-select :selected.sync="selected">
    <kb-table-column
      :label="Kooboo.text.common.name"
      prop="name"
    ></kb-table-column>

    <kb-table-column head-class="table-action" body-class="table-action">
      <template v-slot="row">
        <a class="btn btn-sm blue" :href="row.edit.url" @click.stop>
          {{ row.edit.text }}
        </a>
      </template>
    </kb-table-column>
  </kb-table>
</div>

<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/kooboo/Guid.js",
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/components/kbBreadcrumb.js"
    ]);
  })();
</script>
<script src="/_Admin/View/ECommerce/Product/Types.js"></script>
